<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Stu</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<style>
    table, th {
        text-align: center;
    }

</style>
<body>
<div class="container">
    <table class="table table-hover table-bordered table-striped">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>生日</th>
            <th>专业</th>
        </tr>
        {% for stu in stus %}
        <tr>
            <td>{{ stu.id }}</td>
            <td>{{ stu.name }}</td>
            <td>{{ stu.gender }}</td>
            <td>{{ stu.birthday|date:'Y-m-d' }}</td>
            <td>{{ stu.major }}</td>
        </tr>
        {% endfor %}

    </table>

    <div class="pull-right">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {% if stus.has_previous %}
                <li>
                    <a href="/list?pageNum={{stus.previous_page_number }}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                {% endif %}

                {% for num in stus.paginator.page_range %}
                <li><a href="/list?pageNum={{num}}">{{num}}</a></li>
                {% endfor %}

                {% if stus.has_next %}
                <li>
                    <a href="/list?pageNum={{stus.next_page_number }}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>
</body>
</html>